// 
// 通用函数
// 

// 通用线框 //
// 公共
@mixin line($color){content: "";position: absolute;background-color:$color;}
@mixin line-h($size){left:0;right:0;height:$size;-webkit-transform: scaleY(0.5);}
@mixin line-v($size){top:0;bottom:0;width:$size;-webkit-transform: scaleX(0.5);}

// 直接调用
@mixin line-top($color:$border,$size:1px){top:0;@include line($color);@include line-h($size);-webkit-transform-origin: 0 0;}
@mixin line-bottom($color:$border,$size:1px){bottom:0;@include line($color);@include line-h($size);-webkit-transform-origin: 0 bottom;}
@mixin line-left($color:$border,$size:1px){left:0;@include line($color);@include line-v($size);-webkit-transform-origin: 0 0;}
@mixin line-right($color:$border,$size:1px){right:0;@include line($color);@include line-v($size);-webkit-transform-origin: right 0;}
@mixin line-both($color:$border,$size:1px,$radius:2px,$style:solid){content: "";position: absolute;left:0;top:0;width:200%;height:200%;border-width:$size;border-style:$style;border-color:$color;border-radius:$radius;-webkit-transform:scale(0.5);-webkit-transform-origin:0 0;-webkit-box-sizing:border-box;box-sizing:border-box;pointer-events: none;}

// 通用单边虚线框 //
// 公共
@mixin line-dashed($deg,$color,$color-bg,$start-pos,$end-pos,$repeat:no-repeat){content: "";position: absolute;background: -webkit-repeating-linear-gradient($deg,$color,$color $start-pos,$color-bg $start-pos,$color-bg $end-pos);background: repeating-linear-gradient($deg,$color,$color $start-pos,$color-bg $start-pos,$color-bg $end-pos);background-size: 100% 100%;background-repeat: $repeat;}

@mixin dashed-mask($deg,$mask-color,$mask-color-bg,$mask-start-pos,$mask-end-pos){-webkit-mask-image: -webkit-repeating-linear-gradient($deg,$mask-color,$mask-color $mask-start-pos,$mask-color-bg $mask-start-pos,$mask-color-bg $mask-end-pos);mask-image: repeating-linear-gradient($deg,$mask-color,$mask-color $mask-start-pos,$mask-color-bg $mask-start-pos,$mask-color-bg $mask-end-pos);-webkit-mask-size: 100% 100%;}

// 单边虚线 //
//$color: 虚线颜色
//$color-bg：虚线的背景色
//$start-pos：单位虚线段长度
//$end-pos：单位虚线长度

// 四边虚线 //
//$color: 虚线颜色
//$mask-start-pos：单位虚线段长度(建议优先rem单位)
//$mask-end-pos：单位虚线长度(建议优先rem单位)
//$radius: 圆角

//上虚线 eg:@include line-dashed-top($color:red,$start-pos:4px,$end-pos:8px)
 @mixin line-dashed-top($deg:90deg,$color:$border,$color-bg:transparent,$start-pos:4px,$end-pos:8px,$repeat:no-repeat,$size:1px){top:0;@include line-dashed($deg,$color,$color-bg,$start-pos,$end-pos,$repeat);@include line-h($size);}
 //下虚线
 @mixin line-dashed-btm($deg:90deg,$color:$border,$color-bg:transparent,$start-pos:4px,$end-pos:8px,$repeat:no-repeat,$size:1px){bottom:0;@include line-dashed($deg, $color,$color-bg,$start-pos,$end-pos,$repeat);@include line-h($size);}
 //左虚线
 @mixin line-dashed-left($deg:0deg,$color:$border,$color-bg:transparent,$start-pos:4px,$end-pos:8px,$repeat:no-repeat,$size:1px){left:0;@include line-dashed($deg, $color,$color-bg,$start-pos,$end-pos,$repeat);@include line-v($size);-webkit-transform-origin: 0 0;}
 //右虚线
 @mixin line-dashed-right($deg:0deg,$color:$border,$color-bg:transparent,$start-pos:4px,$end-pos:8px,$repeat:no-repeat,$size:1px){right:0;@include line-dashed($deg, $color,$color-bg,$start-pos,$end-pos,$repeat);@include line-v($size);-webkit-transform-origin: 0 0;}

// 四边虚线 //
@mixin line-dashed-both($deg:45deg,$color:$border,$size:1px,$radius:.8rem,$style:solid,$mask-color:$border,$mask-color-bg:transparent,$mask-start-pos:0.6rem,$mask-end-pos:1.2rem){@include line-both($color,$size,$radius,$style);@include dashed-mask($deg,$mask-color,$mask-color-bg,$mask-start-pos,$mask-end-pos);}

// 上粗宽斜线 
 @mixin line-dashed-skew-top($deg:-45deg,$color:$border,$color-bg:transparent,$start-pos:4px,$end-pos:8px,$repeat:no-repeat,$size:10px){top:0;@include line-dashed($deg, $color,$color-bg,$start-pos,$end-pos,$repeat);@include line-h($size);-webkit-transform: scaleX(1);transform: scaleX(1);}


// 通用圆点线框 //
// 公共
 @mixin line-dotted-h($color,$r,$color-bg,$shadow,$space){content: "";position: absolute;height: 2*$r;background:-webkit-radial-gradient($color $r,$color-bg $shadow);background:radial-gradient($color $r,$color-bg $shadow);background-size:($r+$space)*2 ($r+$space)*2;background-position: -1*$space -1*$space;position: absolute;left:0;right:0;}
 @mixin line-dotted-v($color,$r,$color-bg,$shadow,$space){content: "";position: absolute;width: 2*$r;background:-webkit-radial-gradient($color $r,$color-bg $shadow);background:radial-gradient($color $r,$color-bg $shadow);background-size:($r+$space)*2 ($r+$space)*2;
    background-position: -1*$space -1*$space;position: absolute;top:0;bottom:0;}

//$color: 圆点颜色
//$color-bg：圆点的背景色
//$r：圆点半径
//$space：圆点间单位间距(圆点与圆点间距/2)

//上圆点虚线
 @mixin line-dotted-top($color:$border,$r:1px,$color-bg:transparent,$shadow:0,$space:2px){top:0;@include line-dotted-h($color,$r,$color-bg,$shadow,$space);}
//下圆点虚线
 @mixin line-dotted-btm($color:$border,$r:1px,$color-bg:transparent,$shadow:0,$space:2px){bottom:0;@include line-dotted-h($color,$r,$color-bg,$shadow,$space);}
//左圆点虚线
@mixin line-dotted-left($color:$border,$r:1px,$color-bg:transparent,$shadow:0,$space:2px){left:0;@include line-dotted-v($color,$r,$color-bg,$shadow,$space);}
//右圆点虚线
@mixin line-dotted-right($color:$border,$r:1px,$color-bg:transparent,$shadow:0,$space:2px){right:0;@include line-dotted-v($color,$r,$color-bg,$shadow,$space);}

// 弹性布局
@mixin flex-box{display:-webkit-box;display:-ms-flexbox;} 
@mixin flex{-webkit-box-flex:1;-ms-flex:1;}
@mixin v{-webkit-box-orient:vertical;-ms-flex-direction:column;}
@mixin h{-webkit-box-orient:horizontal;}
@mixin hc{-webkit-box-pack:center;-webkit-pack-items: center;pack-items: center;}
@mixin vc{-webkit-box-align:center;-webkit-align-items: center;align-items: center;}

// 两边对齐
@mixin justify{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between}

// 单行字截断
@mixin text-overflow{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
// 多行字截断
@mixin text-overflow-multi($line, $line-height) {line-height:$line-height;height: $line-height * $line;overflow:hidden;display: -webkit-box;display: box;text-overflow: ellipsis;-webkit-line-clamp: $line;line-clamp: $line;-webkit-box-orient: vertical;box-orient: vertical;}

// 箭头 //
// 公共
@mixin arrow($size,$thick,$color,$right){content:"";position: absolute;width:$size;height:$size;border-width:0 $thick $thick 0;border-style:solid;border-color:$color;right:$right;top:50%;-webkit-transform-origin:center center}
// 直接调用
@mixin arrow-right($size:6px,$thick:2px,$color:$border,$right:1.5rem){-webkit-transform:rotate(-45deg);@include arrow($size,$thick,$color,$right);margin-top:-($size+$thick)/2;}
@mixin arrow-up($size:6px,$thick:2px,$color:$border,$right:1.5rem){-webkit-transform:rotate(-135deg);@include arrow($size,$thick,$color,$right);margin-top:-($size+$thick)/2+($size)*0.85/4;}
@mixin arrow-down($size:6px,$thick:2px,$color:$border,$right:1.5rem){-webkit-transform:rotate(45deg);@include arrow($size,$thick,$color,$right);margin-top:-($size+$thick)/2-($size+$thick)*0.85/4;} //sin(45) = 0.85

// 小三角
// 公共
@mixin triangle{content:"";position:absolute;width:0;height:0;}
@mixin triangle-v($size){@include triangle;border-left:$size solid transparent;border-right:$size solid transparent;left:50%;-webkit-transform:translateX(-50%)}
@mixin triangle-h($size){@include triangle;border-top:$size solid transparent;border-bottom:$size solid transparent;top:50%;-webkit-transform:translateY(-50%)}
// 直接调用
@mixin triangle-up($size:6px,$color:$border){@include triangle-v($size);border-bottom:$size solid $color;top:-$size;}
@mixin triangle-down($size:6px,$color:$border){@include triangle-v($size);border-top:$size solid $color;bottom:-$size;}
@mixin triangle-left($size:6px,$color:$border){@include triangle-h($size);border-right:$size solid $color;left:-$size;}
@mixin triangle-right($size:6px,$color:$border){@include triangle-h($size);border-left:$size solid $color;right:-$size;}

// 点击区域
@mixin hit-area($x:-1rem,$y:-1rem){content:"";position: absolute;z-index:2;left:$x;right: $x; top:$y;bottom: $y;}

// 字体加粗
@mixin f-bold{
    font-weight: 500;
    @media all and (width:360px){
        font-weight: 700;
    }
}

// 关闭按钮
@mixin i-close($color:#888,$size:2rem,$thick:1px,$padding:1rem){ 
    display:inline-block; width:$size;height:$size; padding:$padding;
    b{
        position:relative;display: block;width: 100%;height:100%;-webkit-transform: rotateZ(45deg);transform: rotateZ(45deg);
        &:before,&:after{ content:"";position:absolute;width:100%;height:$thick;background-color: $color;left:0;top:50%;} 
        &:after{-webkit-transform: rotateZ(-90deg);transform: rotateZ(-90deg);}  
    }
}

// 小气泡
@mixin bub-tips($size:6px,$color:#2f78ec){
    position:relative;z-index:2;display:inline-block;padding:.6rem .8rem;background-color: $color;border-radius:4px;color:#fff;font-size: 1.2rem;line-height: 1.6rem;
    &.triangle-down:before{@include triangle-down($size,$color);}
    &.triangle-up:before{@include triangle-up($size,$color);}
    &.triangle-left:before{@include triangle-left($size,$color);}
    &.triangle-right:before{@include triangle-right($size,$color);}
}

// 镂空小气泡(手机上1px,还不完美，有待优化)
@mixin bub-tips-hollow($size:5px,$pos-lf:-4px,$color:#2f78ec,$radius:4px,$bg-color:#fff){
    position:relative;z-index:2;display:inline-block;padding:.2rem .4rem;border-radius:$radius;color:$color;font-size: 1.2rem;line-height: 1.6rem;border: solid 1px $color;
    &.triangle-left{
        &:before{display: inline-block;content:"";position:absolute;width: $size;height: $size;border: solid 1px $color;border-top: none;border-right:none;-webkit-transform: translate3D(0,-50%,0) rotate(45deg);transform: translate3D(0,-50%,0) rotate(45deg);left: $pos-lf;top: 50%;background: $bg-color;}
        
    }
}


// 文字标题横线
@mixin txt-line($w:1.3rem,$bg:#7e7e7e,$space:-2rem){
    span{position: relative;
        &:before{width: $w; height: 1px;background: $bg;position: absolute;content: "";top: 50%;left: $space;}
        &:after{width: $w; height: 1px;background: $bg;position: absolute;content: "";top: 50%;right: $space;}
    }
}

// flex居中
@mixin flex-mid{display: -webkit-box;
     display: -webkit-flex;
     display: flex;
     -webkit-box-pack: center;
     -webkit-justify-content: center;
     justify-content: center;
     -webkit-box-align: center;
     -webkit-align-items: center;
     align-items: center;}

// 水平垂直居中
@mixin mid-center{position: absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}

// 左边垂直居中
@mixin left-center{position: absolute;left:0%;top:50%;-webkit-transform:translate(0%,-50%);transform:translate(0%,-50%);}
// 右边垂直居中
@mixin right-center{position: absolute;right:0%;top:50%;-webkit-transform:translate(0%,-50%);transform:translate(0%,-50%);}
// 图标对齐
@mixin ico-align($height,$w:after){
    line-height:$height;
    &:#{$w}{content:".";color:transparent;}
}

// 图片自适应占位(弃用，但是不能删除)
@mixin adapt-pic-area($h:60%,$w:after,$cw:105%,$bg:#666){position: relative;overflow: hidden;background-color: $bg;
    // 图片撑满
    .pic{position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 1;}
    // 图片居中截取
    .pic-center{position: absolute; top: 50%;left: 50%;width: $cw;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);height: auto;}
    &:#{$w}{content: "";display: block;padding-top: $h;}
    .cnt{position: absolute;top: 0;bottom: 0;left: 0;right: 0;z-index: 2;}
}


// 图片自适应占位  (弃用，但是不能删除)
// -------html代码如下
// <div class="example">
//     <img class="pic" src="" alt="">
//     <div class="cnt"></div>
// </div>

//$imgWidth   图片宽度
//imgHeight   图片高度
//$wei        选择伪类 :before & :after
//$maxWidth   图片撑大宽度的百分比
//$bg         图片后面的背景色
@mixin adapt-pic-area2($imgWidth:200,$imgHeight:100,$wei:after,$maxWidth:105%,$bg:#efefef){position: relative;overflow: hidden;background-color: $bg;
    // 图片撑满
    .pic{position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 1;}
    // 图片居中截取
    .pic-center{position: absolute; top: 50%;left: 50%;width: $maxWidth;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);height: auto;}
    &:#{$wei}{content: "";display: block;padding-top: ($imgHeight/$imgWidth)*1*100%;}
    .cnt{position: absolute;top: 0;bottom: 0;left: 0;right: 0;z-index: 2;}
}


// 最新版本图片自适应占位
// -------html代码如下
// <div class="example">
//     <img class="pic" src="" alt="">
//     <div class="cnt"></div>
// </div>

//$imgWidth   图片宽度
//imgHeight   图片高度
//$wei        选择伪类 :before & :after
//$maxWidth   图片撑大宽度的百分比
//$bg         图片后面的背景色
//$adaption   容器没有留白($adaption:cover)，图片该多大就多大($adaption:none) 
@mixin adapt-pic-area3($imgWidth:200,$imgHeight:100, $wei:after,$maxWidth:105%, $bg:#efefef,$adaption:cover){position: relative;overflow: hidden;background-color: $bg;
    &:#{$wei}{content: "";display: block;padding-top: ($imgHeight/$imgWidth)*1*100%;}
    .cnt{position: absolute;top: 0;bottom: 0;left: 0;right: 0;z-index: 2;}
    @if $adaption == none {
        // 图片撑满
        .pic{position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 1;}
    }
    @else if $adaption == cover {
        // 图片居中截取
        .pic{position: absolute; top: 50%;left: 50%;width: $maxWidth;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);height: auto;}
    }
}


// 该mixin需用用在 input的外层唯一父级div上。<div 这里><input></div>
// $height:代表input的高度；
// $font-size:input输入文字大小；
// $scale；为placeholder字大小与input字体大小的百分比；
// $clor:输入框输入的文本颜色
// $placeholdercolor：placeholder的文本颜色
@mixin inputfix($height, $font-size, $scale,$color,$placeholdercolor) {
    height: $height;
    line-height: $height;
    font-size: $font-size;
    overflow: hidden;
    input {
        line-height: $height;
        font-size: $font-size;
        color:$color;
        &::-webkit-input-placeholder{
            /*font-size可以不定义 默认为input的字体大小  */
             // font-size: $font-size;
             color: $placeholdercolor;
             overflow:inherit;
             transform-origin:left center;
             transform:scale($scale); overflow:inherit;
        }
    }
}

// translate center  block居中
@mixin center-translate($direction: both) {
    position: absolute;
    @if $direction == both {
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
    }
    @else if $direction == x {
        left: 50%;
        transform: translate3d(-50%, 0, 0);
    }
    @else if $direction == y {
        top: 50%;
        transform: translate3d(0, -50%, 0);
    }
}


// flex center  block里边的内容居中
@mixin center-flex($direction: both) {
    display: flex;
    @if $direction == both {
        justify-content: center;
        align-items: center;
    }
    @else if $direction == x {
        justify-content: center;
    }
    @else if $direction == y {
        align-items: center;
    }
}


//头像
@mixin avar($w:2.8rem,$border:1px solid #333,$bg:#ccc){display: inline-block;width: $w;height: $w;border:$border;border-radius: 50%;overflow: hidden;  background-color: $bg;background-image: url(/mb/v4/img/global/avata.png);background-repeat: no-repeat;background-size: 100% 100%;
    img{width: 100%;vertical-align: top;}
}

// v arrow 方向箭头
@mixin v-arrow($direction: right, $borderWidth: 2px, $size: 10px,$borderColor:#888) {
    display: inline-block;
    vertical-align: middle;
    width: $size;
    height: $size;
    @if $direction == top {
        border-top: $borderWidth solid $borderColor;
        border-right: $borderWidth solid $borderColor;
        transform: rotate(-45deg);
    }
    @else if $direction == right {
        border-top: $borderWidth solid $borderColor;
        border-right: $borderWidth solid $borderColor;
        transform: rotate(45deg);
    }
    @else if $direction == bottom {
        border-left: $borderWidth solid $borderColor;
        border-bottom: $borderWidth solid $borderColor;
        transform: rotate(-45deg);
    }
    @if $direction == left {
        border-left: $borderWidth solid $borderColor;
        border-bottom: $borderWidth solid $borderColor;
        transform: rotate(45deg);
    }
}

// 文字右边的上下右箭头
@mixin txt-link($deg:null,$size:.7rem,$thick:.2rem,$color:#e4e4e4,$right:-1rem){position: relative;
    &:before{@include hit-area;}
    &:after{@include arrow($size,$thick,$color,$right);margin-top:-$size/2;
    }

    @if $deg == right{
        &:after{-webkit-transform:rotate(-45deg);}
    }
    @if $deg == down{
        &:after{-webkit-transform:rotate(45deg);margin-top:-($size/2+.4);}
    }
    @if $deg == up{
        &:after{-webkit-transform:rotate(-135deg);margin-top:-$size/2+.2;}
    }
}

// 字体颜色渐变
@mixin text-gradient($start-point:top,$start-color:rgba(228, 192, 148, 1),$end-color:rgba(173, 133, 82, 1)){

    color: $start-color;

    background-image:-webkit-linear-gradient($start-point,$start-color,$end-color);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


